<template>
	<view class="container" :style="appThemeStyle">
	  <view class="maintenance-list">
	    <view class="maintenance-item" v-for="(item, index) in list" :key="index">
	      <view class="contacts">
	        <text class="name">{{ item.address.name }}</text>
	        <text class="phone">{{ item.address.phone }}</text>
	      </view>
	      <view class="address">
	        <text class="region" v-for="(region, idx) in item.address.region" :key="idx">{{ region }}</text>
	        <text class="detail">{{ item.address.detail }}</text>
	      </view>
	      <view class="line"></view>
	      <view class="item-option">
	        <view class="_right">
	          <view class="events">
	            <view class="event-item" @click="handleRemove(item.maintenance_id)" v-if='item.status==0'>
	              <text class="iconfont icon-delete"></text>
	              <text class="title">取消订单</text>
	            </view>
				<view class="event-item" @click="handleOk(item.maintenance_id)" v-if='item.status==4'>
				  <text class="iconfont icon-finish"></text>
				  <text class="title">确认收货</text>
				</view>
				<text v-if="item.status==0">等待接单</text>
				<text v-if="item.status==-1">订单取消</text>
				<text v-if="item.status==2">订单中</text>
				<text v-if="item.status==1">已接单</text>
				<text v-if="item.status==5">订单结束</text>
				<view class="event-item" @click="showSend(item.maintenance_id)" v-if='item.status==3'>
				  <text class="iconfont icon-delete"></text>
				  <text class="title">预约送货</text>
				  <u-picker v-model="show" mode="time" :params="params" @confirm="timeSubmit"></u-picker>
				</view>
			
	          </view>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
	<empty v-if="!list.length" :isLoading="isLoading" tips="没有保养记录" />
</template>

<script>
	import * as Api from '@/api/bike/maintenance'
	import Empty from '@/components/empty'
	export default {
	  components: {
	    Empty
	  },
	  data() {
	    return {
	      //当前页面参数
	      options: {},
	      // 正在加载
	      isLoading: true,
	    
	      list: [],
		  show:false,
		  params: {
		  			year: true,
		  			month: true,
		  			day: true,
		  			hour: true,
		  			minute: true,
		  			second: false
		  },
		  id:'',
		  form:{}
	    }
	  },
	
	  /**
	   * 生命周期函数--监听页面加载
	   */
	  onLoad(options) {
	    // 当前页面参数
	    this.options = options
	  },
	
	  /**
	   * 生命周期函数--监听页面显示
	   */
	  onShow() {
	    // 获取页面数据
	    this.getPageData()
		console.log(this.list.length)
	  },
	
	  methods: {
	
	    // 获取页面数据
	    getPageData() {
	      const app = this
	      app.isLoading = true
	      Promise.all([ app.getMaintenanceList()])
	        .then(() => {
	        })
	        .finally(() => app.isLoading = false)
	    },
	
	    // 获取收货地址列表
	    getMaintenanceList() {
	      const app = this
	      return new Promise((resolve, reject) => {
	        Api.list()
	          .then(result => {
	            app.list = result.data.list
	            resolve(result)
	          })
	          .catch(reject)
	      })
	    },
		//打开送货时间
		showSend(id){
			const app = this
			app.show = true
			app.id = id
		},
		//取消订单
	    handleRemove(maintenanceId) {
	      const app = this
	      uni.showModal({
	        title: "提示",
	        content: "您确定要取消当前订单?",
	        success({ confirm }) {
	          confirm && app.onRemove(maintenanceId)
	        }
	      });
	    },
	    onRemove(maintenanceId) {
	      const app = this
	      Api.closed(maintenanceId)
	        .then(result => {
	           app.getPageData()
	        })
	    },
		handleOk(maintenanceId){
			const app = this
			Api.finish(maintenanceId)
			  .then(result => {
				app.getPageData()
			  })
		},
		timeSubmit(value){
			const app = this
			let book_time = value.year +'-' + value.month + '-' + value.day + ' ' + value.hour + ':' +value.minute + ':00'
			console.log(app.id,book_time)
			app.form.retrieve_time = book_time
			Api.retrieve(app.id,app.form)
			  .then(result => {
			    app.$toast(result.message)
				app.getPageData()
			  })
			  .finally()
		},
	
	  }
	}
</script>

<style lang="scss" scoped>
	.maintenance-list {
	  padding-top: 20rpx;
	  // 设置ios刘海屏底部横线安全区域
	  padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
	  padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
	}
	
	// 项目内容
	.maintenance-item {
	  margin: 0 auto 20rpx auto;
	  padding: 30rpx 40rpx;
	  width: 94%;
	  box-shadow: 0 1rpx 5rpx 0 rgba(0, 0, 0, 0.05);
	  border-radius: 16rpx;
	  background: #fff;
	}
	
	.contacts {
	  font-size: 30rpx;
	  margin-bottom: 16rpx;
	
	  .name {
	    margin-right: 16rpx;
	  }
	}
	
	.address {
	  font-size: 28rpx;
	
	  .region {
	    margin-right: 10rpx;
	  }
	}
	
	.line {
	  margin: 20rpx 0;
	  border-bottom: 1rpx solid #f3f3f3;
	}
	
	.item-option {
	  display: flex;
	  justify-content: space-between;
	  height: 48rpx;
	
	  // 单选框
	  .item-radio {
	    font-size: 28rpx;
	
	    .radio {
	      vertical-align: middle;
	      transform: scale(0.76)
	    }
	
	    .text {
	      vertical-align: middle;
	    }
	  }
	
	  // 操作
	  .events {
	    display: flex;
	    align-items: center;
	    line-height: 48rpx;
	
	    .event-item {
	      font-size: 28rpx;
	      margin-right: 26rpx;
	      color: #4c4c4c;
	
	      &:last-child {
	        margin-right: 0;
	      }
	
	      .title {
	        margin-left: 8rpx;
	      }
	    }
	  }
	
	}
	
	
	// 底部操作栏
	.footer-fixed {
	  position: fixed;
	  bottom: var(--window-bottom);
	  left: 0;
	  right: 0;
	  z-index: 11;
	
	  // 设置ios刘海屏底部横线安全区域
	  padding-bottom: constant(safe-area-inset-bottom);
	  padding-bottom: env(safe-area-inset-bottom);
	
	  .btn-wrapper {
	    height: 120rpx;
	    padding: 0 40rpx;
	  }
	
	  .btn-item {
	    flex: 1;
	    font-size: 28rpx;
	    height: 86rpx;
	    color: #fff;
	    border-radius: 50rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    box-shadow: 0 1rpx 5rpx 0 rgba(0, 0, 0, 0.05);
	  }
	
	  .btn-item-main {
	    background: linear-gradient(to right, $main-bg, $main-bg2);
	    color: $main-text;
	  }
	
	}
</style>